<template>
  <div class="app-container">
    <el-descriptions :column="4" class="margin-top" title="用户详情" border>

      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-user"/>
          用户头像
        </template>
        <el-avatar :src="user.avatar"/>
      </el-descriptions-item>

      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-user"/>
          用户账号
        </template>
        {{ user.userName }}
      </el-descriptions-item>

      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-user"/>
          用户名
        </template>
        {{ user.userRealName }}
      </el-descriptions-item>

      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-user"/>
          用户类型
        </template>
        <div v-if="user.userType == '1'">
          <el-tag type="warning" effect="plain"> 菜农 </el-tag>
        </div>
        <div v-else-if="user.userType == '2'">
          <el-tag type="" effect="plain"> 菜企 </el-tag>
        </div>
        <div v-else-if="user.userType == '3'">
          <el-tag type="success" effect="plain"> 菜商 </el-tag>
        </div>
      </el-descriptions-item>

      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-user"/>
          审核情况
        </template>
        <div v-if="user.judgeFlag === '-1'">
          <el-tag type="danger"> 驳回 </el-tag>
        </div>
        <div v-else-if="user.judgeFlag == '0'">
          <el-tag> 待审核 </el-tag>
        </div>
        <div v-else-if="user.judgeFlag == '1'">
          <el-tag type="success"> 通过 </el-tag>
        </div>
      </el-descriptions-item>

      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-user"/>
          联系方式
        </template>
        {{ user.tel }}
      </el-descriptions-item>

      <el-descriptions-item :span="2">
        <template slot="label">
          <i class="el-icon-user"/>
          地址
        </template>
        {{ user.address }}
      </el-descriptions-item>

      <el-descriptions-item :span="2">
        <template slot="label">
          <i class="el-icon-user"/>
          身份证正面
        </template>
        <div v-if="user.idCardFront != undefined && user.idCardFront != ''">
          <el-image :src="user.idCardFront" :preview-src-list="[user.idCardFront]" style="width: 120px; height: 80px"/>
        </div>
        <div v-else>
          无
        </div>
      </el-descriptions-item>

      <el-descriptions-item :span="2">
        <template slot="label">
          <i class="el-icon-user"/>
          身份证背面
        </template>
        <div v-if="user.idCardBack != undefined && user.idCardBack != ''">
          <el-image :src="user.idCardBack" :preview-src-list="[user.idCardBack]" style="width: 120px; height: 80px"/>
        </div>
        <div v-else>
          无
        </div>
      </el-descriptions-item>

    </el-descriptions>
  </div>
</template>
<script>
import user from '@/api/trace/user'
export default {
  data() {
    return {
      user: {}
    }
  },
  created() {
    this.init()
  },
  methods: {
    init() {
      if (this.$route.params && this.$route.params.id) {
        const id = this.$route.params.id
        const params = {
          id: id
        }
        this.getUser(params)
      } else {
        this.user = {}
      }
    },
    getUser(id) {
      user.detail(id)
        .then(response => {
          this.user = response.data.item
        })
    }
  }
}
</script>
